<template>
  <div class="appPage">
    <h3 class="tit">月报表</h3>
    <div class="search">

      <div class="left">   
        <!-- 日期选择，dayjs -->
        <!-- :clearable="false"  就是那个小叉叉 -->
        <span>月份</span>
        <el-date-picker
          v-model="form.day"
          type="month"
          placeholder="请选择月份"
          @change="getDate"
          :clearable="false"
          format="YYYY-MM">
        </el-date-picker>

        <!-- <span class="demonstration">月</span>
        <el-date-picker
          v-model="form.day"
          type="month"
          placeholder="选择月">
        </el-date-picker> -->

        <el-button type="primary" icon="el-icon-search" @click="handleSearch(scope)" class="searchBtn">查找</el-button>
      </div>
      

      <div class="right">
        <el-button
          class="reset"
          type="primary"
          icon="el-icon-refresh"
          @click="reset()"
          >重置</el-button>
      </div>
    </div>
    <div class="container">
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column prop="day" label="报表日期" align="center"></el-table-column>
        <!-- <el-table-column prop="minute" label="计费分钟数" align="center"></el-table-column> -->
        <el-table-column prop="uuid" label="appId" align="center"></el-table-column>
        <el-table-column prop="seconds" label="计费秒数" align="center"></el-table-column>
        <el-table-column prop="money" label="总成本" align="center"></el-table-column>
        <el-table-column prop="sumCount" label="呼叫总次数" align="center"></el-table-column>
        <el-table-column prop="count" label="呼叫成功次数" align="center"></el-table-column>
        <el-table-column prop="usercount" label="呼叫总用户" align="center"></el-table-column>
        <el-table-column prop="avg" label="avg平均通话时长" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import dayjs from 'dayjs'//日期选择
export default {
  name: "monthlyReport",
  data() {
    return {
      form: {
        day: null,
        uuid: "",
        name: null,
        // minute: "",
        seconds: "",
        money: "",
        sumCount:"",
        count: "",
        usercount: "",
        avg:"",
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,//总共有多少数据
      form: {},
      pageIndex: 1,//当前在第几页
      pageSize: 10,//前端规定每页显示数量
      size:10,//接口请求的每页的数量
      page:1,//接口请求的页数
    };
  },
  created() {
      this.getList()
  },
  //切换界面就执行方法
  activated(){
    this.getList()
  },
  watch:{
      // day(){
      //   if(this.day == "Invalid Date"){
      //       this.day = null
      // }
      // }
  },
  methods: {
    getDate(date){
      this.form.day = dayjs(date).format('YYYY-MM')
    },
    // 分页导航
    handlePageChange(val) {
     this.page = val;
      this.getList();
    },
    getList(){
       let params = {
        page: this.page,
        size: this.size, 
        day:this.form.day,
        // name:this.form.name,
      };
      axios
      .post("http://118.190.2.70:9999/vo/table/monthtableAll", params)
      // .post("http://118.190.2.70:9999/vo/table/monthtableAll", params)
      .then(res => {
        if(res.data.success == false){
                this.$router.push('/403')
          }else{
               this.tableData = res.data.data
                this.pageTotal = res.data.total
          }
      })
      .catch(err => {
        console.log(err);
      })
    },
    handleSearch(){
      this.getList();
    },
    //刷新按钮
    reset() {
      this.form.day = null;
      this.form.name = null;
      this.getList();
    },
  }
};
</script>

<style scoped>

.tit{
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search{
  display: flex;
  justify-content: space-between; 
  margin-top: 20px;
}

.left span{
  width: 100px;
  margin:20px
}

.right{
  display: flex;
  justify-content: flex-end;
  margin-left: 30px;
}
.reset{
  width: 90px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* margin-left: 30px; */
}
.container{
  margin-top: 20px;
}
.searchBtn{
  margin-left: 30px;
}

/* /deep/.el-button--primary{
  margin-left: 30px;
} */
</style>
